<template>
	<div style="margin-bottom:  20px;">
		<el-table
		v-loading="tableLoading"
		ref="elTable"
		element-loading-spinner="el-icon-loading"
		border
		size="mini"
		class="small-size-table"
		:data="tableData"
		v-bind="$attrs"
		v-on="$listeners"
		:header-cell-style="getRowClass"
		highlight-current-row
	>
		<el-table-column
			v-for="(item, index) in columns"
			:key="'column_' + index"
			:prop="columns[index].prop"
			:align="item.alignCenter"
			:label="item.label"
			:min-width="item.minWidth"
			:fixed="item.isFixed"
			:sortable="item.isSortColumn"
			:show-overflow-tooltip="item.isShowTip"
		>
			<template slot="header">
				<span v-if="item.itemTipContent">
					{{ item.label }}
					<el-tooltip
						class="item"
						effect="dark"
						:content="item.itemTipContent"
						placement="top-start"
					>
						<i class="el-icon-question"></i>
					</el-tooltip>
				</span>
				<span v-else>
					{{ item.label }}
				</span>
			</template>
			<template slot-scope="{ row, $index }">
				<template v-if="item.solt === 'serialNumber'">
					{{ $index + 1 }}
				</template>
				<div v-if="item.solt === 'numberSolt'">
					<span :style="handleNumberColor(row[columns[index].prop])">
						{{
							handleNumber(
								'USDT',
								row[columns[index].prop],
								2,
								true,
								true
							)
						}}
					</span>
				</div>
				<div v-if="item.solt === 'noColorNumberSolt'">
					<span>
						{{
							handleNumber(
								'USDT',
								row[columns[index].prop],
							)
						}}
					</span>
				</div>
				<div v-if="item.solt === 'percentage'">
					<span>
						{{(row[columns[index].prop] || 0) + '%' }}
					</span>
				</div>
				<div v-if="item.solt === 'defaultSolt'">
					<span>
						{{ row[columns[index].prop] || '-' }}
					</span>
				</div>
			</template>
		</el-table-column>
	</el-table>
	</div>
</template>

<script>
import list from '@/mixins/list'

export default {
  mixins: [list],
  props: {
    tableLoading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
